<template>
  <div
    class="cp-view"
    :style="{
      width: (width < 500 ? 500 : width) + 50 + 'px',
      height: (height < 300 ? 300 : height) + 50 + 'px',
    }"
  >
    <div class="photo-box flex-row-center-center">
      <img
        :class="['photo-item', isCovered && 'drag']"
        ref="photoRef"
        :src="path"
        alt=""
        :style="{ transform: `rotate(${rotateDeg}deg) scale(${scale})` }"
      />
    </div>
    <div class="photo-btns flex-row-center-center">
      <a-icon
        class="pointer fs-22 m-r-30"
        type="zoom-in"
        @click="onScale(0.1)"
      />
      <span
        :class="['pointer', 'reset-btn', 'm-r-30', scale === 1 && 'disabled']"
        @click="scale = 1"
      >1:1</span>
      <a-icon
        class="pointer fs-22 m-r-30"
        type="zoom-out"
        @click="onScale(-0.1)"
      />
    </div>
    <a-icon
      :class="['icon-left', pathList.indexOf(path) === 0 && 'disabled']"
      @click="handleSwiper(-1)"
      type="left-circle"
    />
    <a-icon
      :class="[
        'icon-right',
        pathList.indexOf(path) === pathList.length - 1 && 'disabled',
      ]"
      @click="handleSwiper(1)"
      type="right-circle"
    />
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      required: false,
      default: '',
    },
    pathList:{
      type:[String,Array],
      required:false
    },
    /*pathList: {
      type: Array,
      default: () => [],
    },*/
  },
  data() {
    return {
      rotateDeg: 0,
      width: 0,
      height: 0,
      scale: 1,
      isCovered: false,
      imgRef: this.$refs.photoRef,
    };
  },
  methods: {
    // 图片前后切换
    handleSwiper(prevOrNext) {
      const index = this.pathList.indexOf(this.path)
      if ((index === this.pathList.length - 1 && prevOrNext === 1) || (index === 0 && prevOrNext === -1)) return
      if (prevOrNext === -1) {
        this.path = this.pathList[index - 1]
      } else if (prevOrNext === 1) {
        this.path = this.pathList[index + 1]
      }
    },
    onScale(val) {
      if (val < 0 && this.scale <= 0.2) {
        return;
      }
      if (val > 0 && this.scale >= 4) {
        return;
      }
      this.scale += val;
    },
  },
  watch: {
    path: {
      immediate: true,
      deep: true,
      handler: function (val) {
        this.rotateDeg = 0;
        const img = document.createElement('img');
        img.src = val || '';
        img.onload = () => {
          let w = img.width;
          let h = img.height
          if (w > 1000) {
            w = 1000;
          }
          if (h > 500) {
            h = 500;
          }
          if (w < 500) {
            h = 500;
          }
          if (h < 300) {
            h = 300;
          }
          this.width = w;
          this.height = h;
        };
      },
    },
    scale: {
      handler: function (val) {
        const img = this.$refs.photoRef;
        if (
          img.width * val > this.width + 50 ||
          img.height * val > this.height + 50
        ) {
          this.isCovered = true;
        } else {
          this.isCovered = false;
        }
      },
    },
  },
};
</script>
<style lang="less" scoped>
  .cp-view {
    position: relative;
    margin-bottom: 40px;
    &:hover {
      .icon-left,
      .icon-right {
        display: block;
      }
    }
    .icon-left,
    .icon-right {
      user-select: none;
      position: absolute;
      font-size: 34px;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50);
      display: none;
      &.disabled {
        color: #999;
        cursor: not-allowed;
      }
    }
    .icon-left {
      left: 0;
    }
    .icon-right {
      right: 0;
    }
    // overflow: hidden;
    .photo-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .photo-item {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
        display: block;
        &.drag {
          cursor: move;
        }
      }
    }
    .photo-btns {
      width: 100%;
      user-select: none;
      position: absolute;
      bottom: -40px;
      text-align: center;
      .reset-btn {
        padding: 1px 5px;
        margin-top: -3px;
        background: #00be7e;
        border: 1px solid #00be7e;
        border-radius: 2px;
        color: #fff;
        &.disabled {
          border-color: #ccc;
          background: none;
          color: #333;
          cursor: default;
        }
      }
    }
  }
</style>